<template>
	<div class="companyInfo">
		<div class="title">企业信息</div>
		<!-- 搜索 -->
		<ProForm
			ref="searchRef"
			v-model="searchForm"
			:items="searchItems"
			inline
			@keyup.enter="handleSearch"
			labelWidth="175px"
		/>

		<!-- 新增 / 编辑抽屉 -->
		<el-drawer v-model="visible" title="新增商机">
			<ProForm ref="drawerRef" v-model="model" :items="formItems">
				<!-- 完全自定义插槽 -->
				<template #customArea="{ model }">
					<el-input v-model="model.remark" type="textarea" rows="3" />
				</template>
			</ProForm>

			<template #footer>
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ProForm from '@/components/baseForm/index.vue'
import { getCompanyDetail } from '@/api/company'
import { userStorage } from '@/utils/storage'
const { enterpriseId } = userStorage.get()
/* 搜索表单 */
const searchForm = reactive({
	enterpriseFullName: '',
	enterpriseName: '',
	logo: '',
	enterpriseCode: '',
	taxId: '',
	bankName: '',
	bankAccountNumber: '',
	bankBranchCode: '',
	account: '',
	period: '',
	save: '',
	computed: '',
	seat: '',
})
const getCompanyDetailApi = async () => {
	const { code, data: res } = await getCompanyDetail(enterpriseId)
	if (code == 200) {
		searchForm.bankAccountNumber = res.bankAccountNumber
		searchForm.enterpriseFullName = res.enterpriseFullName

		searchForm.enterpriseName = res.enterpriseName
		searchForm.enterpriseCode = res.enterpriseCode
		searchForm.taxId = res.taxId
		searchForm.bankName = res.bankName
		searchForm.bankBranchCode = res.bankBranchCode
	}
}
getCompanyDetailApi()
const searchItems = [
	{
		title: '基础信息',
		formList: [
			{
				label: '企业全称',
				prop: 'enterpriseFullName',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: '企业简称',
				prop: 'enterpriseName',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: 'LOGO',
				prop: 'logo',
				type: 'upload',
				attrs: { placeholder: '无', width: '110px', height: '108px' },
			},
			{
				label: '企业编码',
				prop: 'enterpriseCode',
				attrs: { placeholder: '无', disabled: true },
			},
		],
	},
	{
		title: '税务信息',
		formList: [
			{
				label: '税号',
				prop: 'taxId',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: '开户银行',
				prop: 'bankName',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: '开户银行机构代码',
				prop: 'bankBranchCode',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: '银行账号',
				prop: 'bankAccountNumber',
				attrs: { placeholder: '无', disabled: true },
			},
		],
	},
	{
		title: '服务订阅',
		formList: [
			{
				label: '有效期至',
				prop: 'period',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: '存储空间/G',
				prop: 'save',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: 'AI算力积分',
				prop: 'computed',
				attrs: { placeholder: '无', disabled: true },
			},
			{
				label: '员工坐席数',
				prop: 'seat',
				attrs: { placeholder: '无', disabled: true },
			},
		],
	},
]

/* 新增/编辑表单 */
const visible = ref(false)
const model = ref({
	fullName: '杭州坤鹏能源科技有限公司',
	abbreviation: '坤鹏能源',
	logo: '',
	code: 'kunpeng2025',
	taxId: '91310120MADG04GWXB',
	bankName: '上海浦东发展银行普陀支行',
	institutionCode: '310290000089',
	account: '98140078801000005596',
	period: '2026-12-30 12:00',
	save: '500',
	computed: '10000',
	seat: '200',
})
const formItems = [
	{ label: '姓名', prop: 'name', rules: [{ required: true, message: '必填' }] },
	{ label: '部门', prop: 'dept', type: 'select', options: [] },
	{
		label: '手机',
		prop: 'phone',
		rules: [{ pattern: /^1\d{10}$/, message: '格式错误' }],
	},
	{ label: '备注', prop: 'remark', type: 'slot' }, // 走插槽
]

const drawerRef = ref<InstanceType<typeof ProForm>>()

async function submit() {
	await drawerRef.value?.validate()
	await api.save(model.value)
	visible.value = false
}
const handleSearch = () => {}
</script>
<style lang="less" scoped>
.companyInfo {
	.title {
		font-weight: 600;
		font-size: 24px;
		color: #000000;
	}
}
</style>
